<!--
 @description：菜品详情页面
 @author: Xg
 @date: 2021/7/6 20:17
-->
<template>
  <div>
    <!-- 校验页面 -->
    <el-dialog
      :title="title"
      :visible.sync="foodInfoVisible"
      append-to-body
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="closeDialog"
    >

      <el-row>
        <!-- 菜品图片 -->
        <!--        <el-col :span="12">-->
        <!--          <img :src="food.imgVO" class="image">-->
        <!--        </el-col>-->
        <!-- 菜品详情 -->
        <el-col align="center">
          <el-form label-width="100px">
            <el-form-item label="菜品名称">
              <el-input v-model="food.foodName" placeholder="菜品名称" readonly />
            </el-form-item>
            <el-form-item label="所属商家">
              <el-input v-model="store.storeName" placeholder="所属商家" readonly />
            </el-form-item>
            <el-form-item label="菜品描述">
              <el-input v-model="food.remark" placeholder="菜品描述" readonly />
            </el-form-item>
            <el-form-item label="价格(元)">
              <el-input v-model="food.price" placeholder="价格" readonly />
            </el-form-item>
            <el-form-item label="累计点单次数">
              <el-input v-model="food.count" placeholder="累计点单次数" readonly />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail as getFoodDetail } from '@/api/basic/food'
import { getDetail as getStoreDetail } from '@/api/basic/store'

export default {
  name: 'FoodInfo',
  props: {
    foodInfoVisible: {
      type: Boolean,
      default: false
    },
    foodId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '菜品详情',
      food: { },
      store: { }
    }
  },
  created() {
    // 获取菜品详情
    this.getDetail()
  },
  methods: {
    // 关闭详情页面
    closeDialog() {
      this.$emit('close')
    },
    // 获取菜品详情信息
    getDetail() {
      getFoodDetail({ foodId: this.foodId }).then(res => {
        if (res.code === 200) {
          this.food = res.data
          // 处理图片
          // if (this.food.imgVO) {
          //   this.food.imgVO = 'data:image/jpeg;base64,' + this.food.imgVO
          // }
        }
      }).then(() => {
        getStoreDetail({ storeId: this.food.storeId }).then(res => {
          if (res.code === 200) {
            this.store = res.data
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.image {
  height: 250px;
  width: 300px;
}
</style>
